<template>
    <div class="publishContainer">
        <div class="publishContent">
            <div class="back" @click="goBack"></div>
            <div class="publish" @click="gotoSay"></div>
        </div>
        <div class="say">
            <van-cell-group class="titleContainer">
                <van-field v-model="titleValue" placeholder="填写标题"  class="title"/>
            </van-cell-group>
            <van-cell-group class="sayContainer">
                <van-field v-model="sayValue" placeholder="这里是论坛~你要分享什么~"  class="sayContent"/>
            </van-cell-group>
        </div>
        <van-overlay :show="show" class="overlay">
            <div class="keep">
                <p class="tell">存为草稿？</p>
                <div class="confirm" @click="confirm">确定</div>
                <div class="cancel" @click="cancel">丢弃</div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import { Field,Overlay } from 'vant';
    import axios from 'axios';
    export default {
        name:'publishSay',
        data(){
            return{
                titleValue:'',
                sayValue:'',
                show:false
            }
        },
        components:{
            'van-overlay':Overlay,
            'van-field':Field
        },
        methods:{
            goBack(){
                if(this.titleValue && this.sayValue){
                    this.show=true
                }
                else{
                    this.$router.replace({
                        name:'say'
                    })
                }
            },
            async gotoSay(){
                await axios({
                    url:'http://localhost:8080/polycystic/forum/add',
                    method:'post',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        title:this.titleValue,
                        content:this.sayValue
                    }
                })
                this.$router.replace({
                    name:'say'
                })
            },
            cancel(){
                this.titleValue=''
                this.sayValue='',
                this.$router.replace({
                    name:'say'
                })
                this.show=false
            },
            confirm(){
                this.$router.replace({
                    name:'say'
                })
                this.show=false
            }
        }
    }
</script>

<style scoped>
    .publishContainer{
        width: 100vw;
        height: 100vh;
        background-color: #F6F8FA;
        position: relative;
    }
    .publishContent{
        width: 6.22rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 1rem;
    }
    .back{
        background-image: url(../assets/img/0-icon@2x/0-18back.png);
        width: 0.48rem;
        height: 0.48rem;
        background-position: center;
        background-size: contain;
    }
    .publish{
        width: 1.28rem;
        height: .64rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/5-icon@2x/5-8publish.png);
        border-radius: .64rem;
    }
    .titleContainer{
        width: 6.22rem;
        margin: 0 auto;
        margin-top: .3rem;
    }
    .title{
        border-bottom: 2px solid #FFF;
        width: 6.22rem;
        padding: 0;
        border-radius: 0;
        background-color: #F6F8FA;
        display: flex;
        align-items: center;
    }
    .title input{
        font-family: 'PingFangSC-Regular';
    }
    .sayContainer{
        width: 6.22rem;
        margin: 0 auto;
    }
    .sayContent{
        border-bottom: 2px solid #FFF;
        width: 6.22rem;
        height: 60px;
        padding: 0;
        border-radius: 0;
        background-color: #F6F8FA;
    }
    .overlay{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .keep{
        background-color: #FFF;
        border-radius: .4rem;
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: 'PingFangSC-Regular';
        font-size: 16px;
    }
    .tell{
        color: #333333;
        margin-top: 40px;
        margin-bottom: 50px;
    }
    .confirm{
        width: 45%;
        height: 40px;
        background-color: rgb(251, 72, 102);
        border: 1px solid rgb(251, 72, 102);
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#FFF;
    }
    .cancel{
        width: 45%;
        height: 40px;
        border: 1px solid #3333334a;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#33333372;
        margin-top: 40px;
    }
</style>